<template>
  <div class="detailsCon">
    <div class="details_logo_name">
      <p>
        <img
          style="width:30px;height:30px;border-radius:50%;"
          :src="detailPassList.brandLogo"
          alt=""
        />
      </p>
      <span>{{ detailPassList.couponName }}</span>
    </div>
    <div class="details_msg">
      <ul>
        <li>
          <p class="spot"></p>
          优惠券类型 ：
          <span class="typeface_color1">{{ detailPassList.couponType }}</span>
        </li>
        <li>
          <p class="spot"></p>
          优惠力度 ：
          <span
            class="typeface_color2"
            v-if="detailPassList.couponType == '直抵券'"
            >{{
              detailPassList.couponValues &&
              detailPassList.couponValues.length > 0
                ? detailPassList.couponValues["0"]
                : 0
            }}</span
          >
          <span
            class="typeface_color2"
            v-if="detailPassList.couponType == '折扣券'"
            >{{
              detailPassList.couponValues &&
              detailPassList.couponValues.length > 0
                ? detailPassList.couponValues["0"]
                : 0
            }}折</span
          >
          <span
            class="typeface_color2"
            v-if="detailPassList.couponType == '满减券'"
            >满{{
              detailPassList.couponValues &&
              detailPassList.couponValues.length > 0
                ? detailPassList.couponValues["0"]
                : 0
            }}
            <span
              >减{{
                detailPassList.couponValues &&
                detailPassList.couponValues.length > 0
                  ? detailPassList.couponValues["1"]
                  : 0
              }}</span
            ></span
          >
          <span
            class="typeface_color2"
            v-if="detailPassList.couponType == '兑换券'"
            >{{
              detailPassList.couponValues &&
              detailPassList.couponValues.length > 0
                ? detailPassList.couponValues["0"]
                : 0
            }}</span
          >
        </li>
      </ul>
      <ul>
        <li>
          <p class="spot"></p>
          品牌名称 ：
          <span>{{ detailPassList.brandName }}</span>
        </li>
        <li>
          <p class="spot"></p>
          所属商户 ：
          <span>{{ detailPassList.merchantName }}</span>
        </li>
      </ul>
      <ul>
        <li>
          <p class="spot"></p>
          有效期 ：
          <span>{{ detailPassList.failureTime | filterTime }}之前</span>
        </li>
        <li>
          <p class="spot"></p>
          领取限制 ：
          <span>每人限领 {{detailPassList.receiveCount}} 张</span>
        </li>
      </ul>
    </div>
    <div class="details_explain">
      <ul>
        <li>
          <p class="spot m-t"></p>
          优惠券说明 ：
          <span class="textStyle"  v-html="detailPassList.couponRemark"> </span>
        </li>
        <li>
          <p class="spot m-t"></p>
          使用需知 ：
          <span class="textStyle" v-html="detailPassList.useRemark"></span>
        </li>
      </ul>
    </div>
    <div class="details_available">
      <ul>
        <li>
          <p class="spot m-t text-color"></p>
          可用库存 ：
          <span
            >{{
              detailPassList.couponResult == null
                ? "0"
                : detailPassList.couponResult.stockNum
            }}
            张</span
          >
        </li>
      </ul>
    </div>

    <button class="usebtn"  @click="applyUse(couponId)">申请使用</button>

    <!-- 申请使用弹框 -->
    <coupon-application
      :dialogFormVisible="dialogFormVisible"
      @cancel="cancel"
      @sureApply="sureApply"
      :couponId="couponId"
      @close="close"
    ></coupon-application>

    <div class="Collection_record">
      <strong>领取记录</strong>

      <div class="searchCon" :model="receiveRecordList">
        <el-input v-model="listQuery.code" placeholder="请输入券码"></el-input>
        <el-input
          v-model="listQuery.holderName"
          placeholder="请输入持有人"
        ></el-input>
        <el-input
          v-model="listQuery.holderMobile"
          placeholder="请输入持有人手机号"
        ></el-input>
        <button class="search_btn" @click="receiveRecordSearch">查询</button>

        <div class="export_record" @click="download_excel()">
          <img src="../../assets/images/coupons/export.png" alt />
          <span>导出领取记录</span>
        </div>
      </div>

      <!-- 表格 -->
      <el-table
        :header-cell-style="headClass"
        :data="receiveRecordList"
        style="width: 100%"
      >
        <el-table-column
          prop="code"
          label="优惠券Code码"
        ></el-table-column>
        <el-table-column
          prop="holderName"
          label="当前持有人"
        ></el-table-column>
        <el-table-column
          prop="holderMobile"
          label="持有人手机号"
        ></el-table-column>
        <el-table-column label="领取时间" >
          <template slot-scope="scope">
            <span>{{ scope.row.inputTime | filterTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="receiveMode"
          label="获取方式"
        ></el-table-column>
        <el-table-column
          prop="activityName"
          label="活动名称"
          width="100"
        ></el-table-column>
      </el-table>
    </div>

    <pagination
      v-if="total > 0"
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="receiveRecordInit"
    />
  </div>
</template>

<script>
import {
  getCouponInfo,
  exportRecord,
  getRecordPage
} from "../../service/api/index";
import Pagination from "../../components/Pagination/index";
import { mapGetters } from "vuex";
import { parseTime, operateFile } from "@/utils/index";
import couponApplication from "../../views/platformTicket/components/couponApplication";
export default {
  data() {
    return {
      tableData: [
        {
          code: "222458468456",
          holder: "折扣券",
          iphone: "18544464446",
          data: "2020-02-20",
          type: "营销活动",
          adressname: "xxxx营销活动"
        },
        {
          code: "222458468456",
          holder: "满减券",
          iphone: "18544464446",
          data: "2020-02-20",
          type: "营销活动",
          adressname: "xxxx营销活动"
        },
        {
          code: "222458468456",
          holder: "直抵券",
          iphone: "18544464446",
          data: "2020-02-20",
          type: "营销活动",
          adressname: "xxxx营销活动"
        },
        {
          code: "222458468456",
          holder: "兑换券",
          iphone: "18544464446",
          data: "2020-02-20",
          type: "营销活动",
          adressname: "xxxx营销活动"
        }
      ],
      activeName: "allCard",
      listQuery: {
        code:'',
        holderName: "",
        holderMobile: "",
        pageNum: 1,
        pageSize: 10,
        couponInfoState:2
      },
      total: 0,

      formInline: {
        user: "",
        region: ""
      },
      couponId: "",
      detailPassList: [],
      recordId: "",
      receiveRecordList: [],
       dialogFormVisible: false
    };
  },
  filters: {
    filterTime(val) {
      return parseTime(val, "{y}-{m}-{d}");
    }
  },
  created() {
    this.couponId = this.$route.query.couponId || "";
    this.recordId = this.$route.query.recordId || "";
    this.detailPassInit();
    this.receiveRecordInit();
  },
  components: {
    Pagination,
    couponApplication
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  methods: {
    headClass() {
      return "background:#F5F6FA; height:40px;";
    },
    // 领取记录初始化
    async receiveRecordInit() {
      const res = await getRecordPage({
        recordId: this.recordId || "",
        ...this.listQuery
      });
      console.log(res);
      this.receiveRecordList = res.data.content;
      this.total = res.data.totalElements;
    },
    // 详情初始化
    async detailPassInit() {
      const res = await getCouponInfo({
        couponId: this.couponId || ""
      });
      this.detailPassList = res.data;
      console.log(res);
    },
    // 导出领取记录
    download_excel() {
      exportRecord({ recordId: this.recordId })
        .then(res => {
          console.log(res);
          operateFile(res, "领取记录", ".csv");
          if (res.code == 0) {
            this.$notify({
              title: "成功",
              message: "操作成功",
              type: "success"
            });
          }
        })
        .catch(req => {
          this.$notify.error({
            title: "错误",
            message: req.errMsg
          });
        });
    },
    receiveRecordSearch() {
      this.receiveRecordInit();
    },
      async applyUse(couponId) {
      console.log(couponId);
      this.dialogFormVisible = true;
      //  console.log(this.dialogFormVisible)
      // this.$router.push("./couponDetailsPass");
    },
    cancel(val) {
      this.dialogFormVisible = val;
    },
    close(val) {
      this.dialogFormVisible = val;
    },
       sureApply(val) {
      this.dialogFormVisible = val;
      this.detailPassInit();
    }
  }
};
</script>

<style lang="scss" scoped>

/deep/.textStyle p{
  display: block;
  margin: 0;
  padding: 0;
}
.export_record img {
  margin-top: 5px;
}
.export_record span {
  font-size: 16px;
  color: #3b86ff;
  margin-left: 5px;
}
.export_record {
  // padding: 10px 0 0 555px;
  position: absolute;
  right: 10px;
  top: 10px;
}
.search_btn {
  width: 69px;
  height: 32px;
  background-color: #43425d;
  color: #fff;
  border: 0;
  border-radius: 4px;
}
.el-input {
  width: 12%;
  margin-right: 20px;
}
.searchCon {
  display: flex;
  margin-top: 20px;
  margin-bottom: 7px;
  position: relative;
}
/deep/.el-input__inner {
  /* width: 174px; */
  height: 32px;
}
.Collection_record {
  margin: 68px 0 0 60px;
}
.Collection_record strong {
  font-size: 16px;
  color: #4d4f5c;
  border-bottom: 1px solid #bec8e4;
  width: 100%;
  display: inline-block;
  margin-right: 12px;
  padding-bottom: 15px;
}
.usebtn {
  width: 100px;
  height: 32px;
  line-height: 32px;
  background-color: #3b86ff;
  color: #fff;
  border: 0;
  margin-left: 87px;
  border-radius: 4px;
}
.details_available ul li {
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 40px;
}
.text-color {
  background-color: #3b86ff !important;
}
.details_available {
  margin-left: 87px;
}
.m-l {
  margin-left: 15px;
}
.m-t {
  margin-top: 8px !important;
}
.details_explain span {
  width: 1300px;
  height: 60px;
  display: inline-block;
  font-size: 14px;
}
.details_explain ul li {
  display: flex;
  margin: 20px 0;
  font-size: 14px;
}
.details_explain {
  height: 182px;
  margin-left: 87px;
  border-bottom: 1px solid #e9e9f0;
}
.typeface_color2 {
  color: #ff7065;
}
.typeface_color1 {
  color: #ffbe00;
}
.spot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #a5a4bf;
  margin: 2px 5px;
}
.details_msg ul li {
  font-size: 14px;
  height: 40px;
}
.details_msg ul {
  width: 400px;
  height: 57px;
  line-height: 57px;
  margin-right: 100px;
}
.details_msg {
  display: flex;
  border-bottom: 1px solid #e9e9f0;
  height: 107px;
  margin-left: 87px;
}
.details_logo_name {
  display: flex;
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #e9e9f0;
  padding-bottom: 15px;
}
.details_logo_name span {
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #43425d;
}
.details_logo_name p {
  width: 30px;
  height: 30px;
  // border: 1px solid #000;
  border-radius: 50%;
  margin-right: 10px;
}
.detailsCon {
  padding: 19px 20px 0 20px;
}

* {
  margin: 0;
  padding: 0;
}
</style>
